<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
			步骤:
				1. 导入JQ的文件
				2. 文档加载函数 :页面初始化
				3.确定事件 :　点击事件　onclick
				4. 事件触发函数
					1. 移动被选中的那一项到右边
		-->
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    
    <script>
        
        $(function () {
            $("#a1").click(function () {
                //找到被选中的那一项
                //将被选中项添加到右边
                $("#leftSelect option:selected").appendTo("#rightSlect")
            });

            //将左边所有商品移动到右边
            $("#a2").click(function(){
                $("#rightSlect").append($("#leftSelect option"));
            });
        })
    </script>
</head>
<body>
    <table border="1px" width="400px">
        <tr>
            <td>分类名称</td>
            <td><input type="text" value="手机数码"/></td>
        </tr>
        <tr>
            <td>分类描述</td>
            <td><input type="text" value="这里面都是手机数码"/></td>
        </tr>
        <tr>
            <td>分类商品</td>
            <td>
                <div style="float: left">
                    已有商品<br>
                    <select multiple="multiple" id="leftSelect">
                        <option>华为</option>
                        <option>小米</option>
                        <option>锤子</option>
                        <option>OPPO</option>
                    </select>
                    <br>
                    <a href="#" id="a1">&gt;&gt;</a><br>
                    <a href="#" id="a2">&gt;&gt;&gt;</a>
                </div>
                <div style="float: right">
                    未有商品<br>
                    <select multiple="multiple" id="rightSlect">
                        <option>苹果6</option>
                        <option>肾7</option>
                        <option>诺基亚</option>
                        <option>波导</option>
                    </select>
                    <br>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>
</body>
</html>